<template>
    <div>
      <div class="search">
          <div class="input">
            <p>
              <label>文章类型</label>
               <el-select v-model="pageData.value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </p>
              <p><label>文章名称</label><el-input placeholder="请输入内容" label="条件" v-model="pageData.docsName"></el-input></p>
              <p><label>文章备注</label><el-input placeholder="请输入内容" label="条件" v-model="pageData.remark"></el-input></p>
              <p v-show="pageData.value == 'chain_url'"><label>文章地址</label><el-input placeholder="请输入内容" label="条件" v-model="pageData.docsLink"></el-input></p>
              <el-button type="primary" @click="add('post')" v-if="!this.$route.query.id" class="add">发布文章</el-button>
              <el-button type="primary" @click="add('put')" v-else class="add">修改文章</el-button>
          </div>
      </div>
        <!-- :auto-upload="false" -->
        <!-- <el-upload
            class="avatar-uploader"
            action="http://132.232.122.151:10300/admin/api/osscenter/upfile/img/stream/only"
            name="img"

            :data="data"
            :headers = header
            :on-change="beforeUpload"
             :on-success="uploadSuccess"
            :show-file-list="false">
            <el-button size="small" type="primary">点击上传</el-button>
        </el-upload> -->

      <div class="quill" v-if="pageData.value == 'rich_text'">
        <!-- <quill-editor
            v-model="detailContent"
            ref="myQuillEditor"
            :options="editorOption"
            @change="onEditorChange($event)"
            @ready="onEditorReady($event)">
        </quill-editor> -->
            <EditorVue v-model="article.content"/>
              <!--  -->
      </div>


    </div>
</template>

<script>
const defaultForm = {
  status: 'draft',
  title: '', // 文章题目
  content: '', // 文章内容
  content_short: '', // 文章摘要
  source_uri: '', // 文章外链
  image_uri: '', // 文章图片
  display_time: undefined, // 前台展示时间
  id: undefined,
  platforms: ['a-platform'],
  comment_disabled: false,
  importance: 0
}
let toolbarOptions = [
    // ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    // ['blockquote', 'code-block'],
    // [{'header': 1}, {'header': 2}],               // custom button values
    // [{'list': 'ordered'}, {'list': 'bullet'}],
    // [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
    // [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
    // [{'direction': 'rtl'}],
    // [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
    // [{'header': [1, 2, 3, 4, 5, 6, false]}],
    // [{'color': []}, {'background': []}],          // dropdown with defaults from theme
    // [{'font': []}],
    // [{'align': []}],
    // ['link', 'image', 'video'],
    // ['clean']                                         // remove formatting button
]
  import checkPermission from "@/utils/permission"; // 权限判断函数
  import {
    addDocs,
    getDocs,
    compileDocs,
  } from "@/api/newDocs/newDocs";
  import { getToken } from '@/utils/auth'
  import { Base64 } from 'js-base64';
  import Tinymce from '@/components/Tinymce'
  import EditorVue from '@/components/Editor.vue'
  export default {
    components: { Tinymce ,EditorVue},
     data () {
       return {
         postForm: Object.assign({}, defaultForm),
         data : {
            base64Str : '',
            fileOriginName :'',
            id :''
         },
         header : {},
          options: [{label:'富文本',value : 'rich_text'},{label:'外链',value:'chain_url'}],//是否上架
          pageData : {
            docsName : '',
            docsLink  :'',
            remark : '',
            value : 'rich_text'
          },
          fileUrl : '',
           detailContent: '', // 富文本内容
           article : {
               content :'',
           },
       }
     },
     mounted () {
       // document.querySelector('.quill-editor .ql-image').style.display = 'none';
       if (this.$route.query.id !== undefined) {
         var id = this.$route.query.id;
         getDocs(id).then(res=>{
           if (res.data.code == 'OK') {

             this.pageData.value = res.data.data.docsType;
             this.pageData.docsName = res.data.data.docsName;
             this.pageData.docsLink = res.data.data.docsLink;
             this.pageData.remark = res.data.data.remark;
            //  let quill = this.$refs.myQuillEditor.quill;
            //  quill.insertEmbed(this.docsContent);
             this.article.content = res.data.data.docsContent;
           } else {
             this.$message.error(res.data.message);
           }
         })
       }
     },
     methods : {
       add (method) {
          this.dialog = true;
          this.btnState = '1'
          let data = {
            docsName : this.pageData.docsName,
            docsType : this.pageData.value,
            docsContent : this.article.content,
            docsLink :this.pageData.docsLink,
            remark : this.pageData.remark,
            docsId : this.$route.query.id
          }
          addDocs(data,method).then(res=>{
           if (res.data.code == 'OK') {
              if (method == 'post') {
                this.$message.success("新增文章成功");
              } else {
                this.$message.success("修改文章成功");
              }
             setTimeout(()=>{
               this.$router.push({
                 name :'docsList'
               })
             },800)
           } else {
             this.$message.error(res.data.message);
           }
          })
       },
       changeData (val) {
           this.dialog = val
       },
       // beforeUpload (file, fileList) {
       //   let reader = new FileReader();
       //   reader.readAsDataURL(file.raw);
       //   reader.onload =  () => {
       //     this.data.base64Str = reader.result.split(',')[1];
       //   }
       //    this.data.id = file.uid;
       //    this.data.fileOriginName = file.name;
       //    this.data.fileType = file.name.split('.')[1];
       //
       //    this.header['Content-Type'] = 'multipart/form-data'
       //    this.header['RH-CLOUD-ADMIN-TOKEN'] = getToken()
       //    console.log(this.data);
       //    console.log(file);
       //
       // },
       // uploadSuccess (res, file) {
       //    console.log(res);
       // },
       onEditorChange (editor) {
        // console.log(editor);
        // let quill = this.$refs.myQuillEditor.quill;
        // let length = quill.getSelection().index;
        // quill.insertEmbed(length,'image',this.fileUrll);
        // quill.setSelection(length + 1)
       },
       onEditorReady () {

       }
     }
  }
  </script>

<style scoped>
.search {
  width: 100%;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;
  margin-top: 10px;
}
.input {
  /* width: 300px; */
  /* display: flex; */
  flex-wrap: wrap;
}
.input p {
  margin-top: 10px;
}
label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
}
.el-input {
  width:200px;
  height:20px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.se {
  margin-left: 20px;
}
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
.quill {
  margin-top: 20px;
  background-color: #fff;
  /* height: 400px; */
}
.quill-editor {
  height: 300px;
  padding: 0;

}
.ql-container {
    /* height: 300px; */
  }
.add {
  margin-top:10px;
  margin-left: 10px;
}

</style>
